<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--头部css样式-->
<head th:fragment="head-fragment">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Free Bootstrap Themes"/>
    <meta name="author" content=""/>

    <title>我的个人博客</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/blog/resources/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.png}" type="text/css">
    <!-- Custom CSS -->
    <link th:href="@{/blog/resources/css/style.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/blog/resources/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">

<!--    <script th:src="@{/blog/resources/js/html5shiv.js}"></script>-->
<!--    <script th:src="@{/blog/resources/js/respond.min.js}"></script>-->
    <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/fileinput/css/fileinput.css}">
    <!-- 加入FileInput -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{/js/bootstrap/fileinput/js/fileinput.js}"></script>
    <script th:src="@{/js/bootstrap/fileinput/js/zh.js}"></script>
</head>

<!-- /////////////////////////////////////////Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" th:fragment="nav-fragment">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <a class="navbar-brand page-scroll" th:href="@{/}">Personal Blog</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" th:href="@{/ftpFile}">文件传输</a>
                </li>
                <li>
                    <a class="page-scroll" th:href="@{/}">主页</a>
                </li>
                <li>
                    <a class="page-scroll" href="https://gitee.com/yanzhao0707/personal-blog">Gitee</a>
                </li>
                <li>
                    <a class="page-scroll" th:href="@{/details/88}">关于</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- Navigation -->

<!-- /////////////////////////////////////////Header -->
<header id="page-top" th:fragment="page-top">
    <div class="wrap-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-text">
                        <div class="intro-lead-in">Welcome To My Personal Blog!</div>
                        <div class="intro-heading">It's Nice To Meet You</div>

                    </div>
                    <a th:href="@{/details/88}" class="btn btn-1">About Me</a>
                    <a th:href="@{/details/88}" class="btn btn-2">Contact Me</a>
                    <div class="intro-heading-context">离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。</div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Header -->

<!--侧边工具栏-->
<div id="sidebar" class="col-md-4" th:fragment="side-bar">
    <div class="widget wid-vid">
        <div class="heading"><h4>搜索文章</h4></div>
        <div class="content">
            <div class="sidebar-search">
                <form method="get" onsubmit="return false;" accept-charset="utf-8">
                    <div class="search-input">
                        <input type="text" style="width: 210px;display:inline" name="keyword" class="form-control"
                               id="searchbox" placeholder="输入关键字搜索(博客名/类别)" required="required"/>
                        <button class="btn btn-2" style="display:inline" onclick="search()">搜索</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="widget wid-tags">
        <div class="heading"><h4>类别页</h4></div>
        <div class="content">
            <ul class="list-inline" id="category">
                <!--获取所有类别-->
                <th:block th:each="category:${blogCategories}">
                    <li><input name="categoryId" style="display: none;" th:value="${category.getId()}">
                        <a onclick="queryForCategoryId()"
                           th:text="${category.getName()} + '(' + ${category.getCount()} + ')'" name="categoryName">
                        </a></li>
                </th:block>
            </ul>
        </div>
    </div>
    <div class="widget wid-tags">
        <div class="heading"><h4>标签页</h4></div>
        <div class="content">
            <ul class="list-inline" id="tag">
                <!--获取所有标签-->
                <th:block th:each="tag:${tags}">

                    <li><input name="tagId" style="display: none;" th:value="${tag.getId()}">
                        <a onclick="queryForTagId()" th:text="${tag.getName()}" name="tagName">
                        </a></li>
                </th:block>
            </ul>
        </div>
    </div>

    <div class="widget wid-posts">
        <div class="content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#most">点击最多</a></li>
                <li><a data-toggle="tab" href="#recent">最新发布</a></li>
            </ul>
            <div class="tab-content">
                <div id="most" class="tab-pane fade in active">
                    <div class="post">
                        <th:block th:each="blogDto:${blogDtos}">
                            <a th:href="'/details/' + ${blogDto.getBlogId()}"><img
                                    th:src="${blogDto.getBlogCoverImage()}"
                                    style="width: 128px;height: 64px;display:block;"/></a>
                            <div class="wrapper">
                                <h5><a th:href="'/details/' + ${blogDto.getBlogId()}"
                                       th:text="${blogDto.getBlogTitle()}" style="text-transform: none"></a></h5>
                                <p th:text="${blogDto.getAboutTime()}"></p>
                            </div>
                        </th:block>
                    </div>
                </div>
                <div id="recent" class="tab-pane fade">
                    <div class="post">
                        <th:block th:each="recentBlog:${recentBlogs}">
                            <a th:href="'/details/' + ${recentBlog.getBlogId()}"><img
                                    th:src="${recentBlog.getBlogCoverImage()}"
                                    style="width: 128px;height: 64px;display:block;"/></a>
                            <div class="wrapper">
                                <h5><a th:href="'/details/' + ${recentBlog.getBlogId()}"
                                       th:text="${recentBlog.getBlogTitle()}" style="text-transform: none"></a></h5>
                                <p th:text="${recentBlog.getAboutTime()}"></p>
                            </div>
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- /////////////////////////////////////////Footer -->
<footer th:fragment="footer">
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="copyright">Copyright &copy; 2020 Aegean blog.size <br/>All rights reserved.my personal blog
                    #Version 1.0
                </div>
                <a href="http://beian.miit.gov.cn/" target="_blank">  </a>
            </div>
            <div class="ali-report-wrap">
                <a class="ace-link ace-link-primary ali-report-link"
                   href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">
                    <img data-src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"
                        class="ali-report-img"
                        src="./ICP/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"><span
                        class="ali-report-link-text"> 陕ICP备2022001234号 </span></a>
                <a class="ace-link ace-link-primary ali-report-link" href="https://beian.miit.gov.cn/"
                   target="_blank"><span class="ali-report-link-text ali-report-link-text-unique">陕ICP备2022001234号-1</span></a>
            </div>
        </div>
    </div>
</footer>
<!-- Footer -->

<!--js-->
<div th:fragment="JavaScript-fragment">
    <!-- jQuery -->
    <script th:src="@{/blog/resources/js/jquery-1.11.3.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/blog/resources/js/bootstrap.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/blog/resources/js/agency.js}"></script>

    <!-- Plugin JavaScript -->
    <script th:src="@{/blog/resources/js/jquery.easing.min.js}"></script>
    <script th:src="@{/blog/resources/js/classie.js}"></script>
    <script th:src="@{/blog/resources/js/cbpAnimatedHeader.js}"></script>
    <!--自己写的 common.js-->
    <script th:src="@{/blog/js/common.js}"></script>
    <!--鼠标点击爱心特效-->
    <script type="text/javascript">
        !function (e, t, a) {
            function r() {
                for (let e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }

            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }

            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }

            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }

            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            }

            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
        }(window, document);
    </script>
</div>

</html>